<script setup>
import {onMounted, reactive} from "vue";

import GaoDeMap from "@/views/largeScreen/GaoDeMap.vue";
import mHeader from "@/components/mHeader/index.vue";
import mMenu from "@/components/mMenu/index.vue";
import mMenuItem from "@/components/mMenuItem/index.vue";
import mCountCard from "@/components/mCountCard/index.vue";

import zongshu from "@/assets/images/map/zongshu.svg";
import kongxian from "@/assets/images/map/kongxian.svg";
import zhanyong from "@/assets/images/map/zhanyong.svg";
import guzhang from "@/assets/images/map/guzhang.svg";
import autofit from "autofit.js";
import gsap from "gsap";
import OrdersOfTheSameDay from "@/views/largeScreen/OrdersOfTheSameDay.vue";
import QuarterlyGrowth from "@/views/largeScreen/QuarterlyGrowth.vue";

import Monitoring from "@/views/largeScreen/Monitoring.vue";
import MonthlyTrend from "@/views/largeScreen/MonthlyTrend.vue";
import TheRankings from "@/views/largeScreen/TheRankings.vue";
import Electricity from "@/views/largeScreen/Electricity.vue";

import mRadar from "@/components/mRadar/index.vue";
import mSvglineAnimation from "@/components/mSvglineAnimation/index.vue";


const state = reactive({
  // 进度
  progress: 0,
  // 当前顶部导航索引
  activeIndex: "1",
  // 卡片统计数据
  totalView: [
    {
      icon: zongshu,
      zh: "总数",
      en: "31500",
      unit: "",
    },
    {
      icon: kongxian,
      zh: "空闲",
      en: "15000",
      unit: "",
    },
    {
      icon: zhanyong,
      zh: "占用",
      en: "15000",
      unit: "",
    },
    {
      icon: guzhang,
      zh: "故障",
      en: "15000",
      unit: "",
    },
  ],
});

onMounted(() => {
  // 自动适配
  autofit.init({
    dh: 1080,
    dw: 1920,
    el: "#large-screen",
    resize: true,
  });

  function Countdown() {
    let timer = setInterval(() => {
      if (state.progress > 89) {
        clearInterval(timer)
      } else {
        state.progress = state.progress + 5;
      }
    });
  }

  Countdown()


  setTimeout(async () => {
    await hideLoading();
    handleMapPlayComplete();
  }, 1000);
});

// 隐藏loading
async function hideLoading() {
  return new Promise((resolve, reject) => {
    let tl = gsap.timeline();
    tl.to(".loading-text span", {
      y: "200%",
      opacity: 0,
      ease: "power4.inOut",
      duration: 2,
      stagger: 0.2,
    });
    tl.to(
        ".loading-progress",
        {opacity: 0, ease: "power4.inOut", duration: 2},
        "<"
    );
    tl.to(
        ".loading",
        {
          opacity: 0,
          ease: "power4.inOut",
          onComplete: () => {
            resolve();
          },
        },
        "-=1"
    );
    state.progress = 98;
  });
}

function handleMenuSelect(index) {
  state.activeIndex = index;
}

// 地图开始动画播放完成
function handleMapPlayComplete() {
  let tl = gsap.timeline({paused: false});
  let leftCards = gsap.utils.toArray(".left-card");
  let rightCards = gsap.utils.toArray(".right-card");
  let countCards = gsap.utils.toArray(".count-card");
  tl.addLabel("start", 0.5);
  tl.addLabel("menu", 0.5);
  tl.addLabel("card", 1);
  tl.addLabel("countCard", 3);
  tl.to(
      ".m-header",
      {y: 0, opacity: 1, duration: 1.5, ease: "power4.out"},
      "start"
  );
  tl.to(
      ".bottom-tray",
      {y: 0, opacity: 1, duration: 1.5, ease: "power4.out"},
      "start"
  );
  tl.to(
      ".top-menu",
      {
        y: 0,
        opacity: 1,
        duration: 1.5,
        ease: "power4.out",
      },
      "-=1"
  );
  tl.to(
      ".bottom-radar",
      {y: 0, opacity: 1, duration: 1.5, ease: "power4.out"},
      "-=2"
  );
  tl.to(
      leftCards,
      {x: 0, opacity: 1, stagger: 0.2, duration: 1.5, ease: "power4.out"},
      "card"
  );
  tl.to(
      rightCards,
      {x: 0, opacity: 1, stagger: 0.2, duration: 1.5, ease: "power4.out"},
      "card"
  );
  tl.to(
      countCards,
      {
        y: 0,
        opacity: 1,
        stagger: 0.2,
        duration: 1.5,
        ease: "power4.out",
      },
      "card"
  );
}
</script>

<template>
  <div class="large-screen">
    <!-- 地图 -->
        <gaoDeMap/>
    <!--    内容区  -->
    <div class="large-screen-wrap" id="large-screen">
      <!--   标题   -->
      <m-header
          title="新能源高速服务管理平台"
          sub-text="HeBei Economic Visualization Platform"
      >
        <!--左侧 天气 -->
        <template v-slot:left>
          <div class="m-header-weather"><span>小雨</span><span>27℃</span></div>
        </template>
        <!--右侧 日期 -->
        <template v-slot:right>
          <div class="m-header-date">
            <span>2023-10-12</span><span>17:53:16</span>
          </div>
        </template>
      </m-header>

      <!-- 顶部菜单 -->
      <div class="top-menu">
        <mMenu :default-active="state.activeIndex" @select="handleMenuSelect">
          <mMenuItem index="1">地图监控</mMenuItem>
          <mMenuItem index="2">运维管理</mMenuItem>
          <mMenuItem index="3">视频监控</mMenuItem>
          <div class="top-menu-mid-space"></div>
          <mMenuItem index="4">日常运营</mMenuItem>
          <mMenuItem index="5">系统管理</mMenuItem>
        </mMenu>
      </div>

      <!-- 顶部统计卡片 -->
      <div class="top-count-card">
        <mCountCard
            v-for="(item, index) in state.totalView"
            :info="item"
            :key="index"
        ></mCountCard>
      </div>

      <!-- 左边布局 图表 -->
      <div class="left-wrap">
        <div class="left-wrap-3d">
          <!-- 当日订单 -->
          <OrdersOfTheSameDay/>
          <!-- 环比交易信息 -->
          <QuarterlyGrowth/>
          <!-- 视频监控 -->
          <Monitoring/>
        </div>
      </div>

      <!-- 右边布局 图表 -->
      <div class="right-wrap">
        <div class="right-wrap-3d">
          <!-- 月金额趋势 -->
          <MonthlyTrend/>
          <!-- 金额站点排名 -->
          <TheRankings/>
          <!-- 用电情况 -->
          <Electricity/>
        </div>
      </div>

      <!-- 底部托盘 -->
      <div class="bottom-tray">
        <!-- svg线条动画 -->
        <mSvglineAnimation
            class="bottom-svg-line-left"
            :width="721"
            :height="57"
            color="#30DCFF"
            :strokeWidth="2"
            :dir="[0, 1]"
            :length="50"
            path="M1 56.6105C1 31.5123 185.586 10.0503 451.904 1.35519C458.942 1.12543 465.781 4.00883 470.505 9.22964L484.991 25.2383C487.971 28.4775 492.938 30.4201 498.254 30.4201H720.142"
        ></mSvglineAnimation>
        <mSvglineAnimation
            class="bottom-svg-line-left bottom-svg-line-right"
            :width="721"
            :height="57"
            color="#30DCFF"
            :strokeWidth="2"
            :dir="[0, 1]"
            :length="50"
            path="M1 56.6105C1 31.5123 185.586 10.0503 451.904 1.35519C458.942 1.12543 465.781 4.00883 470.505 9.22964L484.991 25.2383C487.971 28.4775 492.938 30.4201 498.254 30.4201H720.142"
        ></mSvglineAnimation>
        <!-- 做箭头 -->
        <div class="bottom-tray-arrow">
          <img src="@/assets/images/largeScreen/bottom-menu-arrow-big.svg" alt=""/>
          <img src="@/assets/images/largeScreen/bottom-menu-arrow-small.svg" alt=""/>
        </div>
        <!-- 底部菜单 -->
        <div class="bottom-menu">
          <div class="bottom-menu-item is-active"><span>人口概览</span></div>
          <div class="bottom-menu-item" @click="handleChangeBar">
            <span>切换数据</span>
          </div>
          <div class="bottom-menu-item"><span>小标题</span></div>
          <div class="bottom-menu-item"><span>小标题</span></div>
        </div>
        <!-- 右箭头 -->
        <div class="bottom-tray-arrow is-reverse">
          <img src="@/assets/images/largeScreen/bottom-menu-arrow-big.svg" alt=""/>
          <img src="@/assets/images/largeScreen/bottom-menu-arrow-small.svg" alt=""/>
        </div>
        <!-- 雷达 -->
        <div class="bottom-radar">
          <mRadar></mRadar>
        </div>
        <!-- 左右装饰线 -->
        <div class="large-screen-left-zsline"></div>
        <div class="large-screen-right-zsline"></div>
      </div>


    </div>


    <!-- loading动画 -->
    <div class="loading">
      <div class="loading-text">
        <span style="--index: 1">L</span>
        <span style="--index: 2">O</span>
        <span style="--index: 3">A</span>
        <span style="--index: 4">D</span>
        <span style="--index: 5">I</span>
        <span style="--index: 6">N</span>
        <span style="--index: 7">G</span>
      </div>
      <div class="loading-progress">
        <span class="value">{{ state.progress }}</span>
        <span class="unit">%</span>
      </div>
    </div>

  </div>
</template>

<style scoped lang="scss">
@import "@/assets/style/home.scss";

.dddd {
  opacity: 0.4;
  transform: translateX(-100%);
}

.aa {
  opacity: 0;
  transform: translateY(-100%);
}

.m-header-weather,
.m-header-date {
  span {
    padding-right: 10px;
    color: #c4f3fe;
    font-size: 14px;
  }
}

.top-menu {
  position: absolute;
  left: 0px;
  right: 0px;
  top: 40px;
  z-index: 3;
  display: flex;
  justify-content: center;

  .top-menu-mid-space {
    width: 800px;
  }
}

.bottom-radar {
  position: absolute;
  right: 500px;
  bottom: 100px;
  z-index: 3;
}

.main-btn-group {
  display: flex;
  left: 50%;
  transform: translateX(-50%);
  bottom: 10px;
  z-index: 999;

  &.disabled {
    pointer-events: none;
  }

  .btn {
    margin-right: 10px;
  }
}

.bottom-svg-line-left,
.bottom-svg-line-right {
  position: absolute;
  right: 50%;
  width: 721px;
  height: 57px;
  margin-right: -5px;
  bottom: -21px;
}

.bottom-svg-line-right {
  transform: scaleX(-1);
  left: 50%;
  right: inherit;
  margin-right: inherit;
  margin-left: -5px;
}

/* 初始化动画开始位置 */
.m-header {
  transform: translateY(-100%);
  opacity: 0;
}

.top-menu {
  transform: translateY(-250%);
  opacity: 0;
}

.count-card {
  transform: translateY(150%);
  opacity: 0;
}

.left-card {
  transform: translateX(-150%);
  opacity: 0;
}

.right-card {
  transform: translateX(150%);
  opacity: 0;
}

.bottom-tray {
  transform: translateY(100%);
  opacity: 0;
}

.bottom-radar {
  transform: translateY(100%);
  opacity: 0;
}

.large-screen-wrap .top-count-card {
  justify-content: center;
}
</style>
